<script setup>
import { onMounted, ref } from 'vue'

const searchItems = ref(['首页', '菜鸟工具', '菜鸟笔记', '参考手册', '用户笔记', '测试/考试', '本地书签'])
const searchItem = ref()
const searchRef = ref()
const manual = ref(['HTML 手册', 'Javascript', 'CSS 1,2,3', 'Zepto中文手册', 'Flat UI', 'PostgreSQL手册'])
onMounted(() => {
  searchRef.value[0].className = 'current'
})

function searchClick(item) {
  searchItem.value = item
  searchRef.value.forEach(search => {
    search.classList.remove('current')
    if (search.innerText === item) {
      search.classList.add('current')
    }
  })
}
</script>

<template>
  <div class="logo-search">
    <div class="logo">
      <a href="javascript:;"></a>
    </div>
    <form action="javascript:;" class="search">
      <input type="text" placeholder="搜索" autocomplete="off">
    </form>
  </div>
  <nav class="navigation">
    <div class="shouye">
      <ul>
        <li v-for="(item, index) in searchItems" :key="index" ref="searchRef">
          <a href="javascript:;" @click="searchClick(item)">{{ item }}</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="sub-navigation" v-if="searchItem === '参考手册'">
    <ul>
      <li v-for="(item, index) in manual" :key="index">
        <a href="/home" target="_blank">
          {{ item }}
        </a>
      </li>
    </ul>
  </div>
</template>

<style scoped lang="scss">
.logo-search {
  padding: 0 150px;
  margin-top: 20px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;

  .logo {
    height: 80px;
    display: flex;
    padding-left: 50px;
    align-items: center;

    a {
      display: block;
      width: 310px;
      height: 50px;
      background: url('@/assets/img/runoob-logo.png') no-repeat;
      background-size: contain;
    }
  }
}

.search {
  display: block;
  line-height: 65px;
  overflow: hidden;
  text-align: center;
  padding-right: 15px;

  input {
    width: 30rem;
    height: 50px;
    font-size: 18px;
    font-weight: 400;
    border-radius: 3px;
    border: 2px solid #ccc;
    padding: 0px 15px;
    outline: none;
    user-select: none;
    color: #ccc;
  }

  &:focus {
    color: rgba(1, 1, 1, .7);
  }
}

.navigation {
  width: 100%;
  background-color: #96b97d;
  padding: 10px 180px;

  .shouye {
    position: relative;
    width: 100%;
    min-width: 48rem;

    ul {
      line-height: 1.5em;

      li {
        display: inline;
        margin: 0 25px 0 0;
        padding: 0 0 12px 0;

        a {
          color: #fff;
          font-size: 17px;
          transition: color .2s;

          &:hover {
            color: #ccc;
          }
        }
      }
    }

    .current {
      background-image: url('@/assets/img/navarrow.png');
      background-repeat: no-repeat;
      background-position: center bottom;
    }
  }
}

.sub-navigation {
  width: 100%;
  min-width: 48rem;
  height: 35px;
  font-size: 1.2em;
  padding: 10px 0 0 180px;
  background-color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, .15);

  ul {

    li {
      display: inline;
      margin-right: 25px;

      a {
        color: #333;
        font-weight: 500;
      }
    }
  }
}

@media screen and (max-width: 99.99rem) {
  .logo-search {
    padding: 0 40px 0 0;
    justify-content: space-between;
  }

  .navigation {
    padding: 10px 50px;
  }

  .sub-navigation {
    padding: 10px 0 0 50px;
  }
}

@media screen and (max-width: 48rem) {
  .logo-search .search {
    display: none;
  }

  .logo-search .logo {
    width: 258px;
    height: 39px;
    transform: translate(-2rem, 2rem);
  }

  .navigation {
    transform: translateY(2rem);
  }

  .sub-navigation {
    transform: translateY(2rem);
  }
}
</style>
